<!--
 * @Descripttion: 木林弹出框
-->
<template>
  <div class="page-modal"
    v-loading.fullscreen.lock="fullscreenLoading"
    element-loading-background="rgba(0, 0, 0, 0.5)"
    :element-loading-text="loadingText">
    <lark-drawer class="shrub-wood-drawer" ref="workCard" :title="title" direction="right" width="25vw" height="auto">
      <template slot="title-operation">
        <i class="icon-download" @click="downloadClick"></i>
      </template>
      <div class="shrub-wood-main">
        <el-table class="table-box" :data="tableData" stripe style="width: 100%">
          <el-table-column prop="xzqmc" label="乡镇名称" align="center">
          </el-table-column>
          <el-table-column label="面积(平方米)" align="center">
            <template slot-scope="scope">
             <span>{{scope.row.mj}}</span> 
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click.native.prevent="highLight(scope.row)" type="text" size="small" icon="el-icon-location-outline">
                定位
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </lark-drawer>
  </div>
</template>
<script>
import { planarArea } from 'lark-map'
import GeometryUtils from "@/utils/yc/GeometryUtils";
import common from "./common"
export default {
  name: "WoodModal",
  props: {
    // 标题
    title: {
      type: String,
      default: "宜灌木林地统计",
    },
    // 类型
    type: {
      type: String,
      default: "6",
    },
    view:{
      type: Object,
      default(){
        return null
      }
    },
    downloadPdfUrl:{
      type: String,
      default: "",
    }
  },
  data () {
    return {
      // 表格数据
      tableData: [],
      // 加载状态
      fullscreenLoading:false,
      // 加载文字
      loadingText: '正在下载中，请耐心等待......',
      // pdf数据
      pdfData: {},
    }
  },
  mixins:[common],
  methods: {
    downloadClick () {
      this.downloadRequest(this.pdfData, this.title + new Date().getTime(),false)
     },
    highLight (row) {
      this.$emit("locationHandler", row)
     },
    // 更新数据
    update (res) {
      const town = []
      let mj = 0
      let sum = 0
      res.forEach(item => {
        town.push(item.attributes)
        mj += item.attributes.mj
        sum += item.attributes.SUM
      })
      mj = mj.toFixed(2)

      town.unshift({
        xzqmc: '武川县',
        xzqdm: '150125',
        mj
      })
      // 生成表格数据
      this.tableData = town

      // 生成pdf数据
      const baseData = {
        mj,
        sl: sum
      }
      this.pdfData = {
        baseData,
        tzhqy:town,
        type: this.type
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.shrub-wood-drawer {
  position: absolute;
  top: 100px;
  right: 0;
  z-index: 1;

  .drawer-collapse-c {
		border: 1px solid #000;
		background-color: #08651a;
		color: #fff;
	}

  .icon-download {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("~@/assets/images/download.svg") no-repeat;
    background-size: cover;
    cursor: pointer;
  }

  .shrub-wood-main {
    height: 65vh;
    background-color: rgb(245, 243, 243);
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      border-radius: 0;
      background-color: rgba(35, 31, 125, 0.6);
    }
    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background-image: linear-gradient(90deg, #086b7a, rgb(17,81,30));
    }
  }
}
</style>